<script setup lang="ts">
import {ref} from 'vue'
import axios from "axios";
import router from "@/router";
import {useMerchantLoginStore} from '../store/useMerchantLoginStore.ts'

const username = ref('')
const password = ref('')
const loginStatus=useMerchantLoginStore()

const login=()=>{
  const loginData={
    username:username.value,
    password:password.value
  }
  console.log(loginData)
  axios.post('http://localhost:8080/login',loginData).then(res=>{
    if (res.data.code===200){
      loginStatus.isLogin = true
      router.push('/')
    }else {
      alert("登录失败")
    }
  })
}

const register = () => {
    router.push('/register')
}
</script>

<template>
  <div class="container">
    <h1>登录</h1>
    <el-input v-model="username" style="width: 240px" placeholder="用户名" />
    <el-input v-model="password" style="width: 240px" type="password" placeholder="密码" show-password />
    <div>
      <el-button type="primary" @click="login">登录</el-button>
      <el-button type="primary" @click="register">商家入驻</el-button>
    </div>
  </div>
</template>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}
</style>